/* 基础颜色定义 */
@base-color: #ccc;
@main-txt-color: rgb(43, 43, 43);
@main-font-size: 16px;
@select-background-color: rgb(99, 99, 99);
@select-txt-color: rgb(0, 192, 128);
@lite-time-txt-color: rgb(77, 105, 107);
@lite-time-txt-size: 14px;
@article-list-width: 890px;
@article-list-content-width: 410px;
@font-family: "宋体";
/* 基础颜色定义结束 */
* {
  font-family: @font-family;
}

body,
html {
  padding: 0;
  margin: 0;
}

::selection {
  color: @select-txt-color;
  // background-color: @select-background-color;
}
/* 基础布局样式 */
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}

.flex-only {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-vertical-center {
  display: flex;
  align-items: center;
}
.flex-justify-between-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-justify-between {
  display: flex;
  justify-content: space-between;
}
/* 垂直平均布局 */
.flex-vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* 换行布局 */
.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* margin的四个方向 */
.margin-way(50, left);
.margin-way(50, right);
.margin-way(50, top);
.margin-way(50, bottom);

.margin-way(@n,@way, @i: 0) when (@i =< @n) {
  .margin-@{way}-@{i} {
    margin-@{way}: @i* (1px);
  }
  .margin-way(@n, @way, (@i + 5));
}
/* padding的四个方向 */
.padding-way(50, left);
.padding-way(50, right);
.padding-way(50, top);
.padding-way(50, bottom);

.padding-way(@n,@way, @i: 0) when (@i =< @n) {
  .padding-@{way}-@{i} {
    padding-@{way}: @i* (1px);
  }
  .padding-way(@n, @way, (@i + 5));
}

/* padding */
.padding(50);

.padding(@n, @i: 0) when (@i =< @n) {
  .margin-@{i} {
    margin: @i* (1px);
  }
  .padding(@n, (@i + 5));
}

/* margin */
.margin(50);

.margin(@n, @i: 0) when (@i =< @n) {
  .margin-@{i} {
    margin: @i* (1px);
  }
  .margin(@n, (@i + 5));
}
// 链接
a {
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;

  &.router-link-exact-active,&:hover {
    color: #42b983;
    transition: .2s;
  }
}
/* 媒体文件 */
//  防止图片变形，相当于取短边
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// 搜索/首页 列表

// 单个列表文章
.article-item {
  width: @article-list-width;
  display: flex;
  margin: 20px auto;
  &:hover {
    cursor: pointer;
    img.thumb {
      transform: scale(1.03);
    }
  }
  img.thumb {
    width: 465px;
    transition: 0.6s;
  }
  .time-txt {
    color: @lite-time-txt-color;
    font-size: @lite-time-txt-size;
  }
  .pre-content {
    cursor: auto;
    width: @article-list-content-width;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 1.4;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
